<div class="op-form-table">
    <table class="op-table-borderless op-detail-list op-form-edit">
        <thead>
        <tr data-bind="foreach: columns">
            <th data-bind="attr: { class: $data.style, width: $data.width }">
                <span data-bind="text: $data.header"></span>
            </th>
        </tr>
        </thead>

        <tbody>
        <!-- ko foreach: rows -->
        <tr data-bind="foreach: $parent.columns">
            <td data-bind="css: $data.style, attr: { width: $data.width }">
                <!-- ko if: $data.type === 'text' -->
                <span data-bind="text: ($parentContext.$index()  + 1)"> </span>
                <!-- /ko -->
                <!-- ko if: $data.type === 'action' -->
                <a href="#"
                   data-bind="formattedValue: $data.defaultValue, format: $data.format, click: $parents[1].command.bind($parents[1], $data.command, $parentContext.$data)"></a>
                <!-- /ko -->
                <!-- ko if: $data.type === 'input' -->
                <input class="form-control"
                       data-bind="attr: { maxlength: $data.maxlength && $parentContext.$index() === 0 ? 640 : 80,id: 'row' + ($parentContext.$index()  + 1) + 'col' + ($index() + 1) },
                       formattedValue: { value: $parent[$data.id], format: $data.format, max: $data.max, min: $data.min },
                       validationReport: $root.formErrors">
                <!-- /ko -->
                <!-- ko if: $data.type === 'select' -->
                    <select data-bind="value: $parent[$data.id], options: $data.options, optionsValue: 'key', optionsText: 'label'"></select>
                <!-- /ko -->
            </td>
        </tr>
        <!-- /ko -->
        <!-- ko if: rows().length < 10 -->
        <!-- ko foreach: defaultItem -->
        <tr data-bind="foreach: $parent.columns">
            <td data-bind="css: $data.style, attr: { width: $data.width }">
                <!-- ko if: $data.type === 'text' -->
                <span data-bind="formattedValue: $data.defaultValue, format: 'minicon'"></span>
                <!-- /ko -->
                <!-- ko if: $data.type === 'input' -->
                <input class="form-control"
                       data-bind="attr: { maxlength: $data.maxlength &&  $parents[1].rows().length === 0 ? 640 : 80, id: 'newrow' + ($parentContext.$index()  + 1) + 'col' + ($index() + 1) }, formattedValue: { value: $parent[$data.id], format: $data.format, max: $data.max, min: $data.min }, valueUpdate: 'afterkeydown', validationReport: $root.formErrors, event: { keydown: $parents[1].keyDown.bind($parents[1]) }">
                <!-- /ko -->
                <!-- ko if: $data.type === 'select' -->
                <select data-bind="value: $parent[$data.id], options: $data.options, optionsValue: 'key', optionsText: 'label'"></select>
                <!-- /ko -->
            </td>
        </tr>
        <!-- /ko -->
        <!-- /ko -->
        </tbody>
    </table>

</div>